@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

/* Components to hide */
#working-set-list-container {
    display: none !important;
}

span#project-title.title {
    display: none;
}

div.working-set-option-btn[style] {
    display: none !important;
}

#sidebar {
    background-color: black;
    text-shadow: none;
}

[data-theme='light-theme'] #sidebar {
    background-color: rgba(0,0,0,.2);
    text-shadow: none;
}

#project-files-header {
    display: none;
}

#project-files-container {
    padding: 12px 0 0 0;
    font-weight: 400;
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
    overflow-x: hidden !important;
}

// Indicates used and available room in a project
#project-size-info {
    padding: 12px 10px 24px;
    overflow: hidden;

    &.hidden {
        display: none;
    }

    .space-available {
        background: rgba(0,0,0,.1);
        position: relative;
        height: 6px;
        margin-bottom: 6px;
        border-radius: 2px;
    }

    .space-used-bar {
        border-radius: 2px;
        width: 0;
        background: #61a782;
        height: 100%;
        position: absolute;
        left: 0;
        transition: all .2s ease-out;
        transition-delay: .2s;
    }

    &.project-size-warning .space-used-bar {
        background: #ef7e42;
    }

    &.project-size-exceeded {
        .space-used-bar {
            background: #da2828;
        }

        .space-used-summary {
            color: #da2828;

            strong {
                color: inherit;
            }
        }
    }

    .space-used-summary {
        color: rgba(0,0,0,.4);
        font-family: "Open Sans";
        margin: 0;

        strong {
            font-weight: 600;
            color: inherit;
            color: rgba(0,0,0,.5);
        }
    }
}

.dark #project-size-info {

    .space-available {
        background: rgba(255,255,255,.2);
    }

    .space-used-bar {
        background: #2a794f;
    }

    .space-used-summary {
        color: rgba(255,255,255,.4);

        strong {
            color: rgba(255,255,255,.5);
        }
    }

    &.project-size-warning .space-used-bar {
        background: #c35921;
    }

    &.project-size-exceeded {

        .space-used-bar {
            background: #a51818;
        }

        .space-used-summary {
            color: #a02626;

            strong {
                color: inherit;
            }
        }
    }
}

#project-files-container ul {
    padding: 0 !important;
}

/* File tree basic styles */

li.jstree-leaf {
    min-height: 37px;
}

// Override for ellipsis
.jstree-brackets li a {
    color: rgba(0,0,0,.4) !important;
}

.dark .jstree-brackets li a {
    color: rgba(255,255,255,.4) !important;
}

li.jstree-leaf a span,
li.jstree-leaf span.extension {
    font-size: 15px;
    color: rgba(255,255,255,.5);
}

li.jstree-closed > a span,
li.jstree-open > a span {
    font-size: 15px;
    color: rgba(255,255,255,.7);
}

body[data-theme='light-theme'] li.jstree-leaf a span,
body[data-theme='light-theme'] li.jstree-leaf span.extension,
body[data-theme='light-theme'] li.jstree-closed > a span,
body[data-theme='light-theme'] li.jstree-open > a span {
    color: rgba(0,0,0,.6);
}

/* Overrides not needed margin */

.jstree-brackets li.jstree-leaf,
.jstree-brackets li.jstree-closed,
.jstree-brackets li.jstree-open {
    margin-left: 0;
}


/* Basic formatting of all items in file menu */

li.jstree-open a,
li.jstree-closed a,
li.jstree-leaf a {
    padding: 12px 10px 12px 40px;
    cursor: pointer !important;
    box-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hides the 'spacing indenter' that the filetree adds into
   into items in folders */

li.jstree-leaf a > div,
li.jstree-open a > div,
li.jstree-closed a > div,
li.jstree-leaf div,
li.jstree-open div,
li.jstree-closed div {
    display: none !important;
}


/* Folders get bold text treatment */

li.jstree-open > a,
li.jstree-closed > a {
    font-weight: 600;
}


/* Selected Item */

li.jstree-leaf a.selected-node,
li.jstree-leaf a.selected-node span,
li.jstree-leaf a.selected-node:hover .extension,
li.jstree-leaf a.selected-node .extension {
    color: white;
}

[data-theme='light-theme'] li.jstree-leaf a.selected-node,
[data-theme='light-theme'] li.jstree-leaf a.selected-node span,
[data-theme='light-theme'] li.jstree-leaf a.selected-node:hover .extension,
[data-theme='light-theme'] li.jstree-leaf a.selected-node .extension {
    color: black;
}


/* Hover state for all items */

li.jstree-leaf:hover a:not(.selected-node),
li.jstree-closed:hover a:first-of-type {
    background: rgba(255,255,255,.08);
}

li.jstree-open > a:first-of-type:hover {
    background: rgba(255,255,255,.08);
}

[data-theme='light-theme'] li.jstree-leaf a:hover:not(.selected-node),
[data-theme='light-theme'] li.jstree-open a:hover:first-of-type,
[data-theme='light-theme'] li.jstree-closed a:hover:first-of-type {
    background: rgba(0,0,0,.08);
}


/* Hover state item text */

li.jstree-open > a span,
li.jstree-closed > a span {
    color: rgba(255,255,255,.7);
}

.menuToggle {
    position: absolute;
    right: 6px;
    top: 7px;
    height: 27px;
    width: 26px;
    cursor: pointer;
    background-image: url(../images/arrow-down-dark.svg);
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    border-radius: 1px;

    &:hover {
        background-color: rgba(0,0,0,.15);
        opacity: .7;
    }

    &.toggle-open {
        display: block;
        opacity: 1;
        background-color: rgba(0,0,0,.15);
        background-image: url(../images/arrow-down-light.svg);
    }
}

.dark .menuToggle {
    box-shadow: none;
    background-image: url(../images/arrow-down-light.svg);

    &:not(.toggle-open):hover {
        background-color: rgba(255,255,255,.2);
    }

    &.toggle-open {
        background-color: white;
        background-image: url(../images/arrow-down-dark.svg);
    }
}

.selected-node .menuToggle {
    display: block;
    opacity: .5;

    &.toggle-open {
        opacity: 1;
    }
}

.jstree-leaf a:hover ,
.jstree-closed a:hover,
.jstree-open a:hover {
    padding-right: 40px;

    .menuToggle:not(.toggle-open) {
        opacity: .5;
        display: block;
    }
}

[data-theme='light-theme'] li.jstree-leaf a:not(.selected-node):hover > span {
    color: rgba(0,0,0,.6);
}

[data-theme='light-theme'] li.jstree-open > a span,
[data-theme='light-theme'] li.jstree-closed > a span {
    color: rgba(0,0,0,.7);
}


/* Message for when there are no files in a folder */

li.jstree-open > ul:empty:after {
    content: "This folder is empty";
    color: rgba(255,255,255,.4);
    padding: 10px 10px 10px 30px;
    font-style: italic;
    display: block;
}

[data-theme='light-theme'] li.jstree-open > ul:empty:after {
    color: rgba(0,0,0,.4);
}


/* Right-clicked file */

li.jstree-closed a.context-node,
li.jstree-open a.context-node,
li.jstree-leaf a.context-node {
    padding-right: 40px;
    background: rgba(255,255,255,.08);
}

[data-theme='light-theme'] li.jstree-closed a.context-node,
[data-theme='light-theme'] li.jstree-open a.context-node,
[data-theme='light-theme'] li.jstree-leaf a.context-node {
    background: rgba(0,0,0,.08);
}

/* Currently selected (edited) file */

li.jstree-leaf a.selected-node {
  background: #222;
  padding-right: 40px;

  span {
    color: white;
  }
}

body[data-theme='light-theme'] li.jstree-leaf a.selected-node,
body[data-theme='light-theme'] li.jstree-leaf a.selected-node:hover {
    background: white;
}


/* Adds icon for folders only icon */

.jstree-brackets li.jstree-closed > .jstree-icon,
.jstree-brackets li.jstree-open > .jstree-icon {
    transition: transform .15s ease-out !important;
    top: 11px;
    left: 14px !important;
    margin: 0 !important;
    background-image: url(../images/folder-arrow.svg);
    background-color: transparent;
    background-position: center;
    background-size: 7px;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .8;
    filter: none;
}


/* Opened folder gets a lighter icon */

.jstree-brackets li.jstree-open > .jstree-icon {
    opacity: 1;
}


/* Hides file icon for non-folders */

.jstree-brackets li.jstree-leaf > .jstree-icon {
    display: none;
}


/* Indents files within a folder */

.jstree-open > ul {
    margin-left: 26px;
}

/* Hides selected (and right-clicked) file overlay, not needed */
/* Still keeping the DOM element in case it has a functional purpose */

.filetree-selection, .filetree-context {
    background: transparent;
    border: none;
    height: 37px;
}

.filetree-selection-extension,
.filetree-context-extension {
    opacity: 0;
}

/* File renaming UI */

#project-files-container .jstree-brackets .jstree-rename-input {
    padding: 8px 6px 7px 6px;
    @-moz-document url-prefix() {
        padding: 10px 6px 10px 6px;
    }
    font-size: 15px;
    line-height: 15px;
    @-moz-document url-prefix() {
        line-height: 20px;
    }
    background: white;
    top: 0 !important;
    display: block;
    margin: 0 0 0 40px !important;
    font-family: inherit;
    color: black;
    border-radius: 0;
    position: relative;
    border: none;
    height: auto;
    width: ~"calc(100% - 55px)" !important;
    box-sizing: border-box;
    animation: inputPop .15s ease-out;
    border: solid 1px rgba(0,0,0,.3);
    display: inline-block;

    &:focus {
      border: solid 1px rgba(0,0,0,.3);
    }
}

@keyframes inputPop {
    0%    { transform: scale(.95);  }
    50%   { transform: scale(1.03); }
    100%  { transform: scale(1);    }
}

.dark #project-files-container .jstree-brackets .jstree-rename-input,
.dark #project-files-container .jstree-brackets .jstree-rename-input:focus {
    border: solid 1px transparent;
}

/* Overrides for Folder rename UI */

#project-files-container .jstree-brackets .jstree-closed .jstree-rename-input,
#project-files-container .jstree-brackets .jstree-open .jstree-rename-input {
    margin-left: 30px;
}

#project-files-container .jstree-brackets .jstree-closed .jstree-rename-input + a,
#project-files-container .jstree-brackets .jstree-open .jstree-rename-input + a {
    display: none;
}


/* Right-click File Menu */
/* TODO - separate dark and light styles into separate theme CSS files. */


.context-menu .dropdown-menu  {
    padding: 0;
    border-radius: 0;
    border: none !important;
    background: white !important;
}

// Don't show New File & New Folder actions when a file's context menu
// has been opened by clicing the toggle icon.
.context-menu.file-menu {
    [id*=newFile] {
        display: none;
    }

    [id*=newFolder] {
        display: none;
    }
}

.context-menu .menu-shortcut {
    display: none;
}

.context-menu .dropdown-menu li a {
    padding: 13px 12px 14px 12px;
    line-height: 16px;
    font-size: 16px;
    cursor: pointer;
    line-height: 16px;
    padding-left: 40px;
    position: relative;
    color: rgba(0,0,0,.6) !important;
}

.context-menu .dropdown-menu li a span {
    display: inline-block;
    line-height: 16px;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
}

.context-menu .dropdown-menu li a:after {
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 40px;
}

// New File
.context-menu .dropdown-menu li a.project-context-menu-filenewFile:after {
    background-image: url(../images/menu-icons/file-dark.svg);
    background-size: 17px;
    background-position: 12px 12px;
}

// New folder
.context-menu .dropdown-menu li a.project-context-menu-filenewFolder:after {
    background-image: url(../images/menu-icons/folder-icon-dark.svg);
    background-size: 16px;
    background-position: 12px 15px;
}

// Rename File
.context-menu .dropdown-menu li a.project-context-menu-filerename:after {
    background-image: url(../images/menu-icons/pencil-dark.svg);
    background-size: 15px;
    background-position: 12px 13px;
}

// Move File
.context-menu .dropdown-menu li a.project-context-menu-bramble-move-filemoveFile:after {
    background-image: url(../images/menu-icons/move-file-black.svg);
    background-size: 16px;
    background-position: 12px 15px;
}

// Delete file
.context-menu .dropdown-menu li a.project-context-menu-filedelete:after {
    background-image: url(../images/menu-icons/trashcan-dark.svg);
    background-size: 14px;
    background-position: 13px 13px;
}

// Download file
.context-menu .dropdown-menu li a.project-context-menu-filedownload:after {
    background-image: url(../images/menu-icons/download-dark.svg);
    background-size: 16px;
    background-position: 13px 13px;
}

.context-menu .dropdown-menu li a:before {
    display: none;
}

.context-menu .dropdown-menu li a:hover {
    background-color: rgba(0,0,0,.1);
    color: rgba(0,0,0,.8);
    background-image: none;
}

.context-menu .dropdown-menu li .menu-shortcut {
    display: none;
}

.context-menu .dropdown-menu {
    border: none;
}


.context-menu .dropdown-menu li a:after {
    opacity: .6;
}

.context-menu .dropdown-menu li a:hover {
    background-color: rgba(0,0,0,.08);
    background-image: none;
}
